import React, { Component } from 'react';
import { Row, Col,message  } from 'antd';
import {
    LeftOutlined,DeleteOutlined 
} from '@ant-design/icons';
import "./cart.scss"

class Cart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cartList: [],//购物车数据
            checkedType: false ,//全选
        }
    }
    componentDidMount() {
        var data = JSON.parse(localStorage.getItem('cart'));
        data.forEach(item=>{
            item.checkType=false
        })
        
        if (data !== null && data.length) {
            this.setState({
                cartList: data
            },()=>{
                console.log(this.state.cartList)
            })
        }
    }
    goNext=()=>{
        this.props.history.go(-1)
    }
    tolte=()=>{
        var sum=0
        this.state.cartList.forEach((item)=>{
           sum+=item.num*item.min_price
           console.log(sum)
        })
        if(sum>=68){
            
            return <div style={{color:"red"}}>订单已满￥68免运费</div>
        }else{
            return <div style={{color:"red"}}>订单未满￥68</div>
        }
    }
    upNum=(itemObj)=>{
        var myCart=JSON.parse(localStorage.getItem("cart"));
        var data=[];//保存商品数据
        myCart.forEach(item=>{
            if(item.item_id===itemObj.item_id){
                item.num++;
            }
            data.push(item);
        })
        localStorage.setItem("cart",JSON.stringify(data));
        message.success('商品添加成功',()=>{

        })
        this.setState({cartList:data})
    }
    downNum=(itemObj)=>{
        var myCart=JSON.parse(localStorage.getItem("cart"));
        var data=[];//保存商品数据
        myCart.forEach(item=>{
            if(item.item_id===itemObj.item_id){
                if(item.num===1){
                    message.error('不能再减了');
                    item.num=1
                }else{
                item.num--;
                message.success('商品减少成功')
                }
            }
            data.push(item);
        })
        localStorage.setItem("cart",JSON.stringify(data));
        this.setState({cartList:data})
    }
    itemDelete=(id)=>{
        var myCart=JSON.parse(localStorage.getItem("cart"));
        var index=myCart.findIndex((item)=>id=item.item_id)
        myCart.splice(index,1)
        localStorage.setItem("cart",JSON.stringify(myCart));
        this.setState({cartList:myCart})
        message.success('删除商品成功')

    }
    checkAll = (ev) => {
        let checkedType = ev.target.checked;
        if (checkedType) {//全选
            this.state.cartList.forEach(i => {
                i.checkType = true;
            })
        } else {//全不选
            this.state.cartList.forEach(i => {
                i.checkType = false;
            })
        }
        this.setState({
            checkedType: checkedType
        })
    }
    checkItem = (i, ev) => {
        console.log(i, ev);
        this.state.cartList[i].checkType = ev.target.checked;
        this.setState({});
        let num = 0;
        this.state.cartList.forEach(i => {
            if (i.checkType) {
                num++;
            }
        })
        // console.log(this.state.cartList);
        if (num === this.state.cartList.length) {//全部选中
            this.setState({ checkedType: true })
        } else {
            this.setState({ checkedType: false })
        }
    }
    componentWillUnmount(){
        this.setState(()=>{
            return;
        })
    }
    render() {
        const { cartList,checkedType } = this.state;
        return (
            <div className="cart">
                <div className="cart_top">
                    <Row>
                        <Col span={4}> <LeftOutlined onClick={this.goNext} className="home" /></Col>
                        <Col span={16}>购物车</Col>
                        <Col span={4}>编辑</Col>
                    </Row>
              </div>
              <div className="sanbao">

              </div>
              <div>
                  <div className="quanxuan">
                      <div>
                           <input type="checkbox" name="checkall" checked={checkedType} onChange={this.checkAll}/>
                           <span> 屈臣氏国内仓库</span>
                      </div>
                      {
                        this.tolte()
                      }
                  </div>
                  <div>
                  {
                    cartList.map((item, index) => <div className="shanp" key={index}>
                        <div className="topp" style={{width:"50px"}}>
                        <input type="checkbox" name="check" checked={item.checkType}
                            onChange={(e) => { this.checkItem(index, e) }}/>
                      </div>
                      <div className='pic'><img src={item.over_image_url} alt=""/></div>
                      <div className="caozuo">
                          <div className="c_top"> 
                              <div>{item.item_name}</div>
                              <div style={{color:'red'}}>￥{item.min_price/100}</div>
                          </div>
                          <div className="c_foot">
                              <div onClick={()=>this.itemDelete(item.item_id)}> <DeleteOutlined />删除</div>
                              <div><button onClick={()=>this.downNum(item)}>-</button><button>{item.num}</button><button onClick={()=>this.upNum(item)}>+</button></div>
                          </div>

                      </div>
                    </div>)
                  }
                  </div>

              </div>
                

            </div>
        );
    }
}

export default Cart;